<!--用户详情 -->
<template>
  <div class="detail-index-content">
    <Modal
      v-model="modalValue"
      :title="titleName"
      footer-hide
      width="600"
      @on-cancel="cancel"
    >
      <div class="user-main">
        <Row :gutter="30">
          <Col span="24">
            <h3>组织架构</h3>
            <Tree
              :data="companyTree"
              @on-select-change="selectCompanyDept"
            ></Tree>
          </Col>
          <Col span="24" style="margin-top: 20px">
            <Button
              type="primary"
              :loading="isLoading"
              @click="handleSubmit('FormRef')"
              >确认</Button
            >
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script type="text/javascript">
import {
  moveUserToOtherDepartment, // 修改公司
} from "@/api/system.js";

export default {
  name: "setPersonInCharge",
  components: {},
  props: {
    echoData: {
      type: Array,
      default: () => [],
    },
    idCompanyList:{
      type: Array,
      default: () => [],
    },
    isHide: {
      type: Boolean,
      default: false,
    },
    titleName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        toDepartmentId: "",
        moveUserDetailVoList: [],
        jobName: "",
      },
      total: 0,
      companyTree: [],
      modalValue: false,
      isLoading: false,
    };
  },
  methods: {
    cancel() {
      this.$emit("update:updateIsHide", false);
    },
    selectCompanyDept(ev) {
      if (ev.length && ev[0] && ev[0].types == 2) {
        this.formData.toDepartmentId = ev[0].companyDepartmentId;
      } else {
        this.formData.toDepartmentId = "";
      }
    },
    async moveUserToOtherDepartmentData() {
      try {
        this.isLoading = true;
        this.formData.moveUserDetailVoList = this.$props.idCompanyList
        let data = await moveUserToOtherDepartment(this.formData);
        this.isLoading = false;
        this.$Message.success("人员调动成功！");
        this.$emit("actionSuccess");
        this.$emit("update:updateIsHide", false);
      } catch (error) {
        this.isLoading = false;
      }
    },
    handleSubmit(name) {
      if(!this.formData.toDepartmentId){
        return this.$Message.error("请选择需要调动的部门")
      }
      this.moveUserToOtherDepartmentData();
    },
  },
  created() {
    console.log(this.$props.echoData, "this.$props.echoData");
    this.companyTree = JSON.parse(JSON.stringify(this.$props.echoData));
    const companyList = (list, types) => {
      list.forEach((o) => {
        if (types == 2) {
          o.title = o.companyDepartmentName;
          o.id = o.companyDepartmentId;
          o.expand = true;
          o.types = types;
        }
        o.children = o.childrenDepartmentList;
        if (o.children) {
          companyList(o.children, 2);
        }
      });
    };

    companyList(this.companyTree, 1);

    this.modalValue = this.$props.isHide;
  },
};
</script>

<style lang="less" scoped>
.ivu-radio-group {
  width: 100%;
}
.head-img {
  display: flex;
  justify-content: center;
  img {
    width: 80px;
    height: 80px;
  }
}
.real-name {
  text-align: center;
  font-size: 14px;
  margin: 20px 0 30px 0;
}
.user-info-main {
  display: flex;
  .info-left {
    margin-right: 10px;
  }
  .info-right {
    line-height: 1;
    padding-top: 8px;
    h4 {
      font-size: 16px;
      font-weight: normal;
    }
    p {
      font-size: 24px;
      margin-top: 10px;
    }
  }
}
.user-main {
  padding: 20px;
}
</style>
